<script setup>
   import axios from 'axios'
   import {ref , onMounted} from 'vue'


   /**
    * axios的使用总结:  
    *   1. npm i axios 
    *   2. 导入axios工具对象  import axios from 'axios'
    *   3. 发起ajax请求
    *      axios({url:"地址",method:"方式"....})
    *   4. async + await 进行结果解析
    *      let {data:{content}} = await axios;
    * 
    * 快速发起get | post请求方式
    *    快速发起get请求 
    *      axios.get(url, [config {请求参数,请求头....} ])
    *    快速发起post请求 
    *      axios.post(url, [{data} 向后台传递的json数据,放在请求体中], [config {请求参数,请求头....} ])
    *    config的语法:  
    *      https://www.axios-http.cn/docs/req_config
    *      params  请求参数 key=value类型参数
    *      data    json类型的参数 put post
    *      headers 自定义请求头
    * 创建全局axios对象,以及设置拦截器
    *     创建axios封装js文件
    *     导入原生的axios对象  improt axios from 'axios'
    *     创建自定义axios对象并导出
    *      let newAxios = axios.create({
    *            baseUrl:" / 无所谓",
    *            timeout: 数字 毫秒
    *      })
    *      自定义请求和响应拦截器
    *      newAxios.interceptors.request.use() | response.use()
    *      export default newAxios;
    * 响应数据结构: 
    *    https://www.axios-http.cn/docs/res_schema
    *    {
          // `data` 由服务器提供的响应
          data: {},

          // `status` 来自服务器响应的 HTTP 状态码
          status: 200,

          // `statusText` 来自服务器响应的 HTTP 状态信息
          statusText: 'OK',

          // `headers` 是服务器响应头
          // 所有的 header 名称都是小写，而且可以使用方括号语法访问
          // 例如: `response.headers['content-type']`
          headers: {},

          // `config` 是 `axios` 请求的配置信息
          config: {},

          // `request` 是生成此响应的请求
          // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
          // 在浏览器中则是 XMLHttpRequest 实例
          request: {}
        }
    */

  //发送请求获取土味情话并且展示,切换按钮
   let message = ref("没有情话!!");

  //axios自动返回一个promise对象
  let getHttpData = async ()=>{
    //axios
    //   let {data:{code,content}} = await axios({
    //     method:"get",
    //     url:"http://forum.atguigu.cn/api/rand.qinghua?format=json"
    // });
    // get方式
    //let {data:{content}} = await axios.get("http://forum.atguigu.cn/api/rand.qinghua",{params:{format:"json"}});
    let {data:{content}} = await axios.post("http://forum.atguigu.cn/api/rand.qinghua",{},{params:{format:"json"}});

    //axios 会对结果进行二次封装  {data: 接口真正的结果 , status: 响应状态码}
    //console.log(code,content);
    message.value = content;
  }
   
  onMounted(()=>{
    getHttpData();
  });

</script>

<template>
  <div>
      {{message}} 
      <br>
      <button @click="getHttpData()">切换</button>
  </div>
</template>

<style scoped>

</style>